<template>
  <div>
    <h1>Home</h1>

    <div>
      <h2>声明式路由(push)</h2>
      <router-link to="Course" active-class="active" tag="button">Course</router-link>
      <router-link to="/home/news">News</router-link>
      <router-link :to="{path: '/home/game'}">Game</router-link>
    </div>

    <div>
      <h2>声明式路由(replace)</h2>
      <router-link to="Course" active-class="active" tag="button" replace>Course</router-link>
      <router-link to="/home/news" replace>News</router-link>
      <router-link :to="{path: '/home/game'}" replace>Game</router-link>
    </div>

    <div>
      <h2>编程式路由(push)</h2>
      <button @click="$router.push('Course')">Course</button>
      <button @click="$router.push('/home/news')">News</button>
      <button @click="$router.push({name: 'Game'})">Game</button>
    </div>
    <div>
      <h2>编程式路由(replace)</h2>
      <button @click="$router.replace('Course')">Course</button>
      <button @click="$router.replace('/home/news')">News</button>
      <button @click="$router.replace({name: 'Game'})">Game</button>
    </div>

    <br>
    <div>
      <button @click="$router.back()">回退</button>
      <button @click="$router.forward()">前进</button>
      <button @click="$router.go(-2)">回退2个</button>
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style scoped>
  a{
    margin: 0 10px;
  }
  .router-link-active{
    color: deeppink;
  }
  .active {
    color: deepskyblue;
  }
</style>
